<!--
 * @Author: Badcandy 568197314@qq.com
 * @Date: 2023-01-05 19:25:03
 * @LastEditors: Badcandy 568197314@qq.com
 * @LastEditTime: 2023-01-06 19:19:47
 * @FilePath: \dcollege\src\views\note\noteIndex.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by Badcandy 568197314@qq.com, All Rights Reserved. 
-->
<template>
  <div class="note-bg">
    <var-app-bar color="white" :elevation="false">
      <template #left>
        <var-button @click="goBack" color="#fff" text-color="#000" round text>
          <var-icon name="chevron-left" :size="24" />
        </var-button>
      </template>
    </var-app-bar>

    <var-image src="./image/empty_note.png" />
    <div class="note-enter">
      <span class="text-title">我的笔记</span>
      <span class="text-desc"
        >课堂笔记，备忘录，学习资源，考试总结...在这里分享你的学习心得</span
      >
      <div class="text-btn">
        <var-button @click="goNote" class="note-btn" type="primary">进入我的笔记</var-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";

const router = useRouter();

function goNote() {
  router.push("/note");
}
function goBack() {
  router.go(-1);
}
</script>

<style lang="less" scoped>
.note-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: #fff;
}
.note-enter {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-left: 30px;
  padding-right: 30px;
  .text-title {
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
  .text-desc {
    font-size: 0.9rem;
    color: rgb(174, 174, 174);
    margin-bottom: 3rem;
  }
  .text-btn {
    display: flex;
    justify-content: center;
    .note-btn{
      width: 70%;
      border-radius: 20px;
    }
  }
}
</style>
